import React, { Component, useEffect } from 'react';
import Form, { Field } from 'rc-field-form';
//import Form, { Field } from './components/my-rc-field-form/';
import Input from './components/Input';

const nameRules = { required: true, message: '请输入姓名！' };
const passworRules = { required: true, message: '请输入密码！' };

export default function MyRCFieldForm(props) {
  const [form] = Form.useForm();

  // 表单校验 成功
  const onFinish = (val) => {
    console.log('onFinish', val); //sy-log
  };

  // 表单校验失败执行
  const onFinishFailed = (val) => {
    console.log('onFinishFailed', val); //sy-log
  };

  useEffect(() => {
    console.log('form', form); //sy-log
    form.setFieldsValue({ username: 'default - input' }); // 设置表单值
  }, []);

  return (
    <div>
      <h3>MyRCFieldForm</h3>
      <Form form={form} onFinish={onFinish} onFinishFailed={onFinishFailed}>
        <Field name="username" rules={[nameRules]}>
          <Input placeholder="input UR Username" />
        </Field>
        <Field name="password" rules={[passworRules]}>
          <Input placeholder="input UR Password" />
        </Field>
        <button>Submit</button>
      </Form>
    </div>
  );
}
